<template>
  <a-drawer
    :visible="visible"
    title="新增文件"
    @close="cancelClick"
    :width="400"
  >
    <a-form layout="vertical">
      <a-form-item label="文件名称:" v-bind="validateInfos.name">
        <a-input v-model:value="modelRef.name" placeholder="请输入" />
        <a-tag
          style="margin-top: 10px"
          v-for="tag in tagList"
          :key="tag.name"
          @click="tagClick(tag.name)"
        >
          <a>{{ tag.name }}</a>
        </a-tag>
      </a-form-item>
      <a-form-item label="上传文件:" v-bind="validateInfos.url">
        <a-upload-dragger
          v-model:fileList="fileList"
          name="file"
          :multiple="false"
          :action="$utils.fileAction"
          :headers="{ 'org-token': $store.getters.token }"
          :showUploadList="false"
          @change="handleUploadChange"
          accept="doc,.docx,.pdf,image/*,.bmp,.tiff"
          :data="{
            dir: 'org_village_leases',
          }"
        >
          <template v-if="fileList.length">
            <p class="ant-upload-drag-icon">
              <FileTextOutlined />
            </p>
            <p class="ant-upload-text">
              {{ fileList[0].name }}
            </p>
          </template>
          <template v-else>
            <p class="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p class="ant-upload-text">
              拖拽文件至虚线款内或点击此区域上传文件
            </p>
            <p class="ant-upload-hint">
              文档只支持doc、.docx、.pdf、jpg、jpeg、png格式
            </p>
          </template>
        </a-upload-dragger>
      </a-form-item>
      <div class="drawer-footer">
        <a-button class="mr-10" @click.prevent="cancelClick">取消</a-button>
        <a-button type="primary" @click="handleOk">保存</a-button>
      </div>
    </a-form>
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, ref, computed, watch, toRaw } from "vue";
import { Form, message } from "ant-design-vue";
import { InboxOutlined, FileTextOutlined } from "@ant-design/icons-vue";
import request from "../../../../common/utils/request";
import _ from 'lodash';
const useForm = Form.useForm;
export default defineComponent({
  name: "enclosure",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
  },
  components: { InboxOutlined, FileTextOutlined },
  setup(props, context) {
    const tagList = [
      {
        name: "租客位置",
      },
      {
        name: "附加协议",
      },
      {
        name: "公司介绍",
      },
      {
        name: "身份证正面",
      },
      {
        name: "身份证反面",
      },
    ];

    const tagClick = (name) => {
      modelRef.name = name;
    };

    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入文件名称",
        },
      ],
      url: [
        {
          required: true,
          message: "请上传附件",
        },
      ],
    });
    const modelRef = reactive({
      name: "",
      url: "",
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const fileList = ref([]);
    const handleUploadChange = (info) => {
      let resFileList = [...info.fileList];
      if (resFileList.length) {
        resFileList = resFileList.slice(-1);
        resFileList = resFileList.map((file) => {
          if (file.response) {
            if (file.response.code == 1000) {
              file.url = file.response.data.fileUrl;
              modelRef.url = file.url;
            } else {
              message.warning(file.response.msg);
            }
          }
          return file;
        });
      } else {
        modelRef.url = "";
      }
      fileList.value = resFileList;
    };
    const handleOk = () => {
      validate().then(() => {
        let params = _.cloneDeep(modelRef);
        params.owner_id = props.id;
        request.post("/org", "/owner/files", params).then((res) => {
          message.success("添加成功");
          context.emit("success");
          resetFields();
          fileList.value = [];
        });
      });
    };
    const cancelClick = () => {
      resetFields();
      fileList.value = [];
      context.emit("onCancel");
    };
    return {
      handleOk,
      cancelClick,
      resetFields,
      validate,
      modelRef,
      rulesRef,
      validateInfos,
      handleUploadChange,
      fileList,
      tagList,
      tagClick,
    };
  },
});
</script>

<style lang="less" scoped></style>
